import React, { useRef } from 'react'
import { Form, Row, Col, Input, Select, Space, Button, Cascader, Radio } from 'antd'
import style from './Index.module.less'
import { getProvinceCityTree } from '@js/area'
import { clanList, politicalList } from '@src/assets/js/config'
const areas = getProvinceCityTree()
const { Item } = Form
const { Option } = Select
const layout = {
  labelCol: { flex: '140px' }
}

function formatCondition (form) {
  const condition = []
  if (form.name !== undefined && form.name !== '') {
    condition.push({ k: 'name', o: 'like', v: `%${form.name}%` })
  }
  if (form.gender) {
    condition.push({ k: 'gender', o: '=', v: form.gender })
  }
  if (form.occupation) {
    condition.push({ k: 'occupation', o: '=', v: form.occupation })
  }
  if (form.country !== undefined && form.country !== '') {
    condition.push({ k: 'country', o: '=', v: form.country })
  }
  if (form.area instanceof Array && form.area.length > 2) {
    condition.push({ k: 'province', o: '=', v: form.area[0] })
    condition.push({ k: 'city', o: '=', v: form.area[2] })
  }
  if (form.nation) {
    condition.push({ k: 'nation', o: '=', v: form.nation })
  }
  if (form.political) {
    condition.push({ k: 'political', o: '=', v: form.political })
  }
  if (form.foreign_case_in) {
    condition.push({ k: 'foreign_case_in', o: '=', v: form.foreign_case_in === '是' ? 1 : 0 })
  }
  return condition
}

function Main ({ onChange = () => {}, types, countryList }) {
  const formRef = useRef(null)
  return (
    <div>
      <Form name='arbitrator-manage-search' ref={formRef} {...layout} initialValues={{ retire: '', foreign_case_in: '', professional_tag: '全部' }} onFinish={d => onChange(formatCondition(d))} onReset={() => formRef.current.submit()}>
        <Row gutter={24}>
          <Col span={8}>
            <Item label='姓名' name='name'>
              <Input placeholder='请输入' />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='性别' name='gender'>
              <Radio.Group options={['男', '女']} />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='职业分类' name='occupation'>
              <Select placeholder='请选择' options={types} allowClear />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='国家地区' name='country'>
              <Select options={countryList} placeholder='请选择' allowClear />
            </Item>
          </Col>
          <Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.country !== currentValues.country}>
            {
              ({ getFieldValue }) => {
                if (getFieldValue('country') === '中国') {
                  return (
                    <>
                      <Col span={8}>
                        <Item label='省市' name='area'>
                          <Cascader options={areas} placeholder='请选择' />
                        </Item>
                      </Col>
                      <Col span={8}>
                        <Item label='民族' name='nation'>
                          <Select placeholder='请选择' showSearch allowClear>
                            {clanList.map((li, i) => {
                              return (
                                <Option key={i} value={li}>{li}</Option>
                              )
                            })}
                          </Select>
                        </Item>
                      </Col>
                    </>
                  )
                }
                return <span />
              }
            }
          </Item>
          <Col span={8}>
            <Item label='政治面貌' name='political'>
              <Select placeholder='请选择' allowClear>
                {politicalList.map((li, i) => {
                  return (
                    <Option key={i} value={li}>{li}</Option>
                  )
                })}
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item label='是否擅长涉外案件' name='foreign_case_in'>
              <Radio.Group options={['是', '否']} />
            </Item>
          </Col>
          <Col span={8} />
        </Row>
        <Row>
          <Col span={24}>
            <Item className={style['right-line']}>
              <Space size='middle'>
                <Button type='primary' ghost htmlType='submit'>搜索</Button>
                <Button htmlType='reset'>重置</Button>
              </Space>
            </Item>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default Main
